<script setup>
import { ref } from 'vue';
import { useUserStore } from '../../store/user';
import { onShow, onLoad, onReachBottom, onShareAppMessage } from '@dcloudio/uni-app';
import { uniFetch } from '../../api/uni-fetch';
import { usePageShare } from '../../hooks/login';
import LoadingUnit from '@/components/LoadingUnit/LoadingUnit.vue';
import customTabbar from '@/components/customTabbar/customTabbar.vue';
import { useRegister } from '../../hooks/login'

const store = useUserStore();

onShareAppMessage(() => {
	const openid = uni.getStorageSync("userLoginCode").openid || uni.getStorageSync("userLoginCode").user.openid
	return {
		title: '华靓甄选',
		path: '/pages/index/index?invite_token=' + openid
	}
})

const memberRechargePopup = ref(null);
const userMember = ref({})

onShow(() => {
	setTimeout(async () => {
		store.token = uni.getStorageSync('userLoginCode').token;
		
		if (!store.token) {
		uni.showToast({
			title: '请您登录',
			icon: 'none'
		})
		setTimeout(() => {
			memberRechargePopup.value?.open('');
		}, 300);
	} else { 
		const member = await uni.request({
			url: uniFetch.baseURL + '/user/user-member',
			method: 'POST',
			header: {
				token: store.token
			}
		})
		userMember.value = member.data.data
		if (!userMember.value.is_member) {
			setTimeout(() => {
				memberRechargePopup.value?.open('');
			}, 300);
		}
	 }
	}, 1000);
});

const goCZ = ref(false)
function MemberRecharge() {
	if (!store.token) {
		memberRechargePopup.value.close()
		goCZ.value = true
		setTimeout(() => {
			loginPopup.value.open("bottom");
		}, 300);
	} else {
		memberRechargePopup.value.close()
		uni.navigateTo({
			url: '/pages/MemberRecharge/MemberRecharge'
		});
	}
}

// 分类跳转
function goTypePage(item, index) {
	if (index == 0) {
		uni.showToast({
			title: '敬请期待',
			icon: 'none'
		})
	} else if (index == 1) {
		uni.navigateTo({
			url: '/pages/MemberRecharge/MemberRecharge'
		});
	} else if (index == 2) {
		uni.showToast({
			title: '敬请期待',
			icon: 'none'
		})
	} else if (index == 3) {
		uni.showToast({
			title: '敬请期待',
			icon: 'none'
		})
	}
	
}

// 商品分类
const classifyList = ref([])
async function getClassity() {
	const res = await uniFetch.post('/category/list', { app_id: uni.appId })

	res.data = res.data.length > 7 ? res.data.slice(0, 7) : res.data;

	await Promise.all(res.data.map(async item => {
		const image = await getGoodsList(item.id)
		item.image = image
	}))

	classifyList.value = res.data
	classifyList.value.push({ 
		id: 999,
		name: '全部',
		image: '/static/images/qb2.png',
	 })
}
getClassity()

// 爆款
async function handleClickBk(item) {
	uni.navigateTo({
		url: `/pages/ProductDetails/ProductDetails?goodsId=${item?.id}`
	})
}

// 限时团购
async function handleClickTg(item) {
	uni.navigateTo({
		url: `/pages/ProductDetails/ProductDetails?goodsId=${item?.product_id}&groudId=${item?.id}&group_price=${item?.group_price}`
	})
}

function goGroupBuyList() {
	uni.navigateTo({
    url: '/subpkg/GroupBuyList/GroupBuyList'
  })
}


// 分类
async function handleClickFl(item) {
	if (item.id == 999) {
		uni.switchTab({
			url: '/pages/classify/classify'
		})
	} else {
		// 分类页  非tabbar
		// uni.navigateTo({
		// 	url: '/pages/classify/classify?id='+item.id
		// })
		
		// tabbar页面
		uni.setStorageSync('classifyId', item.id);
		uni.switchTab({
			url: '/pages/classify/classify'
		});
	}
}

async function getGoodsList(id) {
  const res = await uniFetch.post('/product/list', { 
    app_id: uni.appId, 
    cate_id: id, 
    page: 1, 
    pageSize: 1 
  })
	return res.data.list[0].banner_image
}

// function goCreateGroupBuy() {
// 	uni.navigateTo({
//     url: '/subpkg/CreateGroupBuy/CreateGroupBuy'
//   })
// }

const selectedAddress = ref('')
// 地址
const getAddress = function () {
	// 隐私
	wx.getPrivacySetting({
		success: res => {
			console.log(res)
			if (res.needAuthorization) {
				console.log(res, '隐私');
			} else {
				console.log('隐私条款suc');
			}
		},
		fail: (err) => {
			console.log(err.msg, '隐私协议接口出错');
		},
	})

	// 地址选择
	uni.chooseAddress({
		success: (res) => {
			selectedAddress.value = res.countyName + res.detailInfo
		},
		fail(err) {
			console.log(err);
		}
	})
}

const bkList = ref([
	
])
const currentPage = ref(1);
const isLoading = ref(false);
const hasMore = ref(true);

// 加载更多数据的函数
const loadMoreData = async () => {
  if (isLoading.value || !hasMore.value) return;

  isLoading.value = true;

	try {
    const { data } = await uniFetch.post('/product/list', {
      app_id: uni.appId,
      page: currentPage.value,
      pageSize: 10
    })

    if (data?.list && data.list.length > 0) {
      bkList.value = [...bkList.value, ...data.list];
      currentPage.value++;
      
      if (data.total && bkList.value.length >= data.total) {
        hasMore.value = false;
      }
    } else {
      hasMore.value = false;
    }
  } catch (error) {
    uni.showToast({
      title: '获取商品列表失败',
      icon: 'none'
    })
  } finally {
    isLoading.value = false;
  }
};

loadMoreData()

// 使用微信小程序的触底加载钩子函数
onReachBottom(() => {
  loadMoreData();
});

const seckillListjf = ref([
  { id: 1, name: '可口可乐 330ml', price: 2.5, number: 2264, image: '../../static/images/shop3.png', oldPrice: 0.01, jf: 248 },
  { id: 2, name: '薯片 50g', price: 4.9, number: 5489, image: '../../static/images/shop6.png', oldPrice: 0.01, jf: 248 },
  { id: 2, name: '黄豆酱340g/瓶', price: 4.9, number: 5489, image: '../../static/images/shop3.png', oldPrice: 0.01, jf: 248 },
  { id: 2, name: '枸杞750g/贷', price: 4.9, number: 5489, image: '../../static/images/shop3.png', oldPrice: 0.01, jf: 248 },
  { id: 2, name: '香菇干', price: 4.9, number: 5489, image: '../../static/images/shop6.png', oldPrice: 0.01, jf: 248 },
  { id: 3, name: '矿泉水 550ml', price: 1.5, number: 1856, image: '../../static/images/shop3.png', oldPrice: 0.01, jf: 248 }
]);

const cardList = ref([
	{
		title: '分享好友领积分',
		content: '好友打开即可领取积分',
		image: '/static/images/fxx.png'
	},
	{
		title: '会员福利',
		content: '商城售卖机专属会员福利',
		image: '/static/images/fxhl.png'
	},
	{
		title: '积分换购商品',
		content: '超多礼品等你换购',
		image: '/static/images/lh.png'
	},
	{
		title: '本地商家·免费推广',
		content: '点击了解更多详情',
		image: '/static/images/fw.png'
	}
])

usePageShare('/pages/index/index');
const loginPopup = ref(null);

// 机柜id
const cabinetId = ref('')
// 提货
function goTake() {
	if (cabinetId.value) {
		uni.redirectTo({
			url: `/subpkg/TakeIndex/TakeIndex?cabinetId=${cabinetId.value}`
		});
	} else {
		uni.redirectTo({
			url: '/subpkg/takeScan/takeScan'
		});
	}
}

// 扫码
function handleScan() {
	if (!store.token) {
		uni.showToast({ title: '您未登录,请授权登录', icon: 'none', duration: 1500 })
		setTimeout(() => {
			loginPopup.value.open("bottom");
		}, 1500);
		return;
	}

	const isSupplier = uni.getStorageSync('userLoginCode').isSupplier
	
	if (isSupplier) {
		uni.showModal({
			title: "请选择补货或者购物",
			confirmText: "补货",
			cancelText: "购物",
			success: async (res) => {
				// 补货
				if (res.confirm) {
					uni.scanCode({
							scanType: ["qrCode"],
							success: async (open) => {
								const machineId = open.result.match(/id=([^&]*)/)[1];
								uni.setStorageSync("machineId", machineId);
								
								const isSup = await uniFetch.post("/user/is-supplier", {
									box_id: machineId,
								});
								// 当前设备补货权限
								if (isSup.data) {
									uni.redirectTo({
										url: "/subpkg/replenishLoading/replenishLoading?code=" +
											encodeURIComponent(
												machineId),
									});
								} else {
									uni.showToast({
										title: "您没有补货权限",
										icon: "none",
									});
								}
							},
							fail(err) {
								uni.showToast({
									title: "扫码取消",
									icon: "none",
								});
							},
					});
				} else {
						uni.scanCode({
							scanType: ["qrCode"],
							success: async (open) => {
								const machineId = open.result.match(/id=([^&]*)/)[1];
								uni.setStorageSync("machineId", machineId);
								uni.redirectTo({
									url: "/pages/shoppingScan/shoppingScan?machineId=" + machineId,
								});
							},
							fail(err) {
								uni.showToast({
									title: "扫码取消",
									icon: "none",
								});
							},
					});
				}
			}
		});
	} else {
		uni.scanCode({
			scanType: ["qrCode"],
			success: async (open) => {
				const machineId = open.result.match(/id=([^&]*)/)[1];
				uni.setStorageSync("machineId", machineId);
				uni.redirectTo({
					url: "/pages/shoppingScan/shoppingScan?machineId=" + machineId,
				});
			},
			fail(err) {
				uni.showToast({
					title: "扫码取消",
					icon: "none",
				});
			},
		});
	}
}

function closeLoginPopup() {
	loginPopup.value.close();
}

// 登录授权
async function userLogin() {
	wx.getPrivacySetting({
		success: (res) => {
			console.log(res);
			if (res.needAuthorization) {
				// 需要弹出隐私协议
				console.log(res, '隐私');
			} else {
				// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
				console.log('隐私条款suc');
			}
		},
		fail: (err) => {
			console.log(err.msg, '隐私协议接口出错');
		}
	});

	await useRegister();
	closeLoginPopup();
	
	if (goCZ.value) {
		uni.navigateTo({
			url: '/pages/MemberRecharge/MemberRecharge'
		});
		goCZ.value = false
	}
}

// 跳转到视频号直播间
async function goToChannelsLive() {
	try {
		console.log('开始获取视频号直播信息');
		// 检查API是否可用
		if (typeof wx.getChannelsLiveInfo === 'function') {
			console.log('wx.getChannelsLiveInfo API 可用');
			await wx.getChannelsLiveInfo({
				finderUserName: 'sphK0y44Cr4NlCn',
				success:(res)=>{
					console.log(res, 'ressss');
					
					if (res === undefined) {
						uni.showToast({
							title: '当前视频号暂无直播',
							icon: 'none'
						});
						return;
					}
					
					if (res && res.feedId && res.nonceId) {
						console.log('直播信息有效，准备打开直播间');
						// 打开视频号直播
						wx.openChannelsLive({
							feedId: res.feedId,
							nonceId: res.nonceId,
							success: () => {
								console.log('打开视频号直播成功');
							},
							fail: (err) => {
								console.error('打开视频号直播失败:', err);
								uni.showToast({
									title: '打开直播间失败',
									icon: 'none'
								});
							}
						});
					} else {
						console.warn('获取的直播信息不完整或无效:', res);
						uni.showToast({
							title: '当前无直播或直播信息无效',
							icon: 'none'
						});
					}
				},
			});
		} else {
			console.error('当前环境不支持视频号API');
			uni.showToast({
				title: '当前环境不支持视频号功能',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error('获取视频号直播信息过程发生异常:', error);
		uni.showToast({
			title: '系统繁忙，请稍后再试',
			icon: 'none'
		});
	}
}

const tgList = ref([])
async function getTgShop() {
	const res = await uniFetch.post('/shop-group-buying/list', {
		app_id: uni.appId,
		page: 1,
		pageSize: 3
	})
	tgList.value = res?.data?.list || []
}
getTgShop()

onLoad(async (device) => {
	if (device.q) {
		const URLres = decodeURIComponent(device.q);
		let deviceId = URLres.split("id=")[1];
		console.log(deviceId, 'deviceId');

		if (!store.token) {
			uni.showToast({ title: '您未登录,请授权登录', icon: 'none', duration: 1500 })
			setTimeout(() => {
				loginPopup.value.open("bottom");
			}, 1500);
			return;
		}
		
		uni.login({
			scopes: "auth_user",
			success: async (res) => {
				if (res.code) {
					//发起网络请求
					const user = await uniFetch.post("/user/login", {
						code: res.code,
						appId: uni.appId,
					});
					console.log(user, "/user/login");
					if (user.data.isSupplier) {
						const isSup = await uniFetch.post("/user/is-supplier", {
							box_id: deviceId,
						});
						if (isSup.data) {
							uni.showModal({
								title: "请选择补货或者购物",
								confirmText: "补货",
								cancelText: "购物",
								success: async (res) => {
									if (res.confirm) {
										uni.redirectTo({
											url: "/subpkg/replenishLoading/replenishLoading?code=" +
												encodeURIComponent(
													deviceId),
										});
									} else {
										uni.setStorageSync("machineId", deviceId);
										uni.redirectTo({
											url: "/pages/shoppingScan/shoppingScan?machineId=" +
												deviceId,
										});
									}
								},
								fail: (err) => {
									// console.log(err, "2222");
								},
							});
						} else {
							uni.setStorageSync("machineId", deviceId);
							uni.redirectTo({
								url: "/pages/shoppingScan/shoppingScan?machineId=" +
									deviceId,
							});
						}
					} else {
						uni.setStorageSync("machineId", deviceId);
						uni.redirectTo({
							url: "/pages/shoppingScan/shoppingScan?machineId=" +
								deviceId,
						});
					}
				}
			},
			fail(err) {
				uni.showToast({
					icon: "none",
					title: err.errMsg,
				});
			},
		});
	}
});

</script>

<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="top-nav">
			<view class="box" @click="getAddress">
				<uni-icons class="icon1" type="location" size="20" color="#fff"></uni-icons>
				<view class="title">{{ selectedAddress ? selectedAddress : '请选择地址' }}</view>
				<uni-icons type="down" size="16" color="#fff"></uni-icons>
			</view>
			<!-- 右上角视频号悬浮框 -->
			<view class="channels-live-float" @click="goToChannelsLive">
				<image src="/static/images/zhibo2.png" mode="aspectFit"></image>
				<text>直播中</text>
			</view>
    </view>

		<!-- 购物 /  提货 -->
		<view class="margin">
			<view class="gshop">
				<view class="box" @click="handleScan">
					<view class="title">立即购物</view>
					<view class="til">扫描二维码开门</view>
					<view class="contents">
						<view class="xy"><uni-icons type="right" size="13" color="#fff"></uni-icons></view>
						<image style="width: 85px; height: 90px;" src="../../static/images/top1.png"></image>
					</view>
				</view>
				<view class="box" @click="goTake">
					<view class="title">我要提货</view>
					<view class="til">输入验证码提货</view>
					<view class="contents">
						<view class="xy"><uni-icons type="right" size="13" color="#fff"></uni-icons></view>
						<image style="width: 85px; height: 90px;" src="../../static/images/top2.png"></image>
					</view>
				</view>
			</view>
		</view>

    <!-- 一键团购 -->
		<!-- <view class="margin" style="margin-top: 20rpx; margin-bottom: 20rpx; border-radius: 20rpx; overflow: hidden;">
			<view class="group-buy-banner" @click="goCreateGroupBuy">
				<view class="banner-content">
					<text class="banner-title">一键开团</text>
					<text class="banner-subtitle">立即创建您的团购活动</text>
					<view class="xy"><uni-icons type="right" size="25" color="#fff"></uni-icons></view>
				</view>
			</view>
		</view> -->

    <!-- 分类导航 -->
    <view class="margin" style="margin-top: 20rpx;">
			<view class="category">
				<view @click="handleClickFl(item)" class="category-item" v-for="(item, index) in classifyList" :key="index">
					<image :src="item.image" mode="aspectFit"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

    <!-- 限时团购 -->
    <view class="margin" style="margin-bottom: 20rpx;">
			<view class="seckill">
				<view class="seckill-title">
					<text class="title-text">
						<text class="left">限时团购</text>
						&nbsp;<text class="right">|&nbsp;  限时折扣火热来袭</text>
					</text>
					<text @click="goGroupBuyList" class="more">查看全部 ></text>
				</view>
				<view class="seckill-list">
					<view v-show="tgList.length > 0" class="seckill-item" :style="index != 2 ? 'margin-right: 20rpx;' : ''" @click="handleClickTg(item)" v-for="(item, index) in tgList" :key="index">
						<image :src="item.productPic" mode="aspectFit"></image>
						<text class="price">¥{{ item.group_price }}</text>
						<text class="name">爆卖{{ item.sold }}件</text>
					</view>
					<view v-show="tgList.length == 0" style="height: 100px;">
						<text style="color: #515050;">暂无...</text>
					</view>
				</view>
				<view class="tg-btn">
					<view class="btn" @click="goGroupBuyList">
						<text>立</text>
						<text>即</text>
						<text>团</text>
						<text>购</text>
					</view>
				</view>
			</view>
		</view>

    <!-- 卡片 -->
    <view class="margin" style="display: grid; grid-template-columns: repeat(2, 1fr);">
			<view :class="index == 0 || index == 2 ? 'margin-bottom-right' : 'margin-bottom'" class="goods-list-card" v-for="(item, index) in cardList" @click="goTypePage(item, index)" :key="index">
				<view class="section-title">
					<text>{{ item.title }}</text>
				</view>
				<view class="goods-grid">
					<view class="goods-item-left">
						<view class="title">{{ item.content }}</view>
						<view class="btn">Go ></view>
					</view>
					<view v-if="index == 2" class="goods-item-right2">
						<image :src="item.image" mode="aspectFit"></image>
					</view>
					<view v-else-if="index == 1" class="goods-item-right1">
						<image :src="item.image" mode="aspectFit"></image>
					</view>
					<view v-else-if="index == 0" class="goods-item-right0">
						<image :src="item.image" mode="aspectFit"></image>
					</view>
					<view v-else class="goods-item-right">
						<image :src="item.image" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 积分换购 -->
		<!-- <view class="margin" style="margin-bottom: 20rpx;">
			<view class="seckill-jf">
				<view class="seckill-title">
					<text class="title-text">
						<text class="left">积分换购</text>
						&nbsp;<text class="right">|&nbsp;  限时折扣火热来袭</text>
					</text>
					<text class="more">查看全部 ></text>
				</view>
				<view class="seckill-list">
					<view class="seckill-item" v-for="(item, index) in seckillListjf" :key="index">
						<image :src="item.image" mode="aspectFit"></image>
						<text class="title">{{ item.name }}</text>
						<text class="price instant-num">{{ item.jf }}积分+{{ item.price }}元</text>
						<text class="name">原价:￥<text style="text-decoration: line-through;">{{ item.oldPrice }}</text></text>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 爆款推荐 -->
		 <view  class="margin">
			<view class="hotShop">
				<view class="title">
					<text class="fh">--</text>
					&nbsp;&nbsp;
					<text class="font">爆款推荐</text>
					&nbsp;&nbsp;
					<text class="fh">--</text>
				</view>
				<view class="list">
					<view class="item" @click="handleClickBk(item)" v-for="(item, index) in bkList" :key="index">
						<image :src="item?.banner_image" mode="scaleToFill" />
						<view class="content">
							<view class="title-2">
								<view class="price"><text class="fh">￥</text>{{ item.price }}</view>
							</view>
							<view class="name">
								{{ item.title }}
							</view>
						</view>
					</view>
				</view>
				<!-- 加载中提示 -->
        <view class="loading" v-if="isLoading">
          <text>加载中.....</text>
        </view>
        <!-- 没有更多数据提示 -->
        <view class="no-more" v-if="!hasMore && !isLoading">
          <text>没有更多数据了</text>
        </view>
			</view>
		 </view>

		<!-- <view class="safe-area"></view> -->

    <!-- 扫码开门 -->
    <!-- <view class="float-scan" @click="handleScan">
      <view class="nb" style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <image style="width: 25px; height: 25px; transform: translateY(-3px);" src="/static/tabbar/sys.png" mode="aspectFit"></image>
        <span class="text">扫码开门</span>
      </view>
    </view> -->

    <!-- <customTabbar></customTabbar> -->

    <!-- 登录弹框 -->
    <uni-popup ref="loginPopup" type="bottom" :safe-area="false" :is-mask-click="false">
      <view class="login-form">
        <uni-icons type="close" @click="closeLoginPopup" color="#949494" size="30" style="position: absolute; right: 30rpx"></uni-icons>
        <view class="login-title">
          <image src="../../static/logo.png"></image>
          <view class="welcome">欢迎使用智能售卖机</view>
          <view class="tipsS">登录后，您将可以享受更多功能</view>
        </view>
        <LoadingUnit></LoadingUnit>
        <view class="login-button">
          <button class="login" @click="userLogin">
            <!-- #ifdef MP-WEIXIN -->
            <uni-icons type="weixin" color="#fefefe" size="30"></uni-icons>
            <!-- #endif -->
            授权登录
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 会员充值弹窗 -->
    <uni-popup ref="memberRechargePopup" :safe-area="false" :is-mask-click="false">
			<view style="position: relative;">
				<uni-icons type="close" @click="memberRechargePopup.close()" color="#fff" size="33" style="position: absolute; right: 120rpx; z-index: 1;"></uni-icons>
				<image @click="MemberRecharge" src="../../static/czz2.png" style="width: 100vw; height: 150rpx; margin: 20rpx auto;"></image>
			</view>
    </uni-popup>

		<ws-wx-privacy id="privacy-popup"></ws-wx-privacy>
  </view>
</template>

<style lang="scss">
@import './index.scss';
.container {
	background-color: #f6f6f9;
  padding-bottom: 10rpx; /* 为底部导航腾出空间 */
}

.margin { 
	margin: 0 33rpx;
}

/* 顶部导航 */
.top-nav {
  padding: 20rpx 30rpx;
  background-color: #3bae43;
  color: #fff;
	display: flex;
	height: 200rpx;
	.box {
		display: flex;
		align-items: center;
		height: 40rpx;
		.icon1 {
			margin-right: 5rpx;
		}
	}
  .title {
		font-size: 30rpx;
		font-weight: bold;
		margin-right: 8rpx;
		width: 300rpx;
		overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 视频号直播悬浮框 */
.channels-live-float {
	position: absolute;
	top: 15rpx;
	right: -38rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 30rpx;
	padding: 10rpx 20rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	z-index: 100;
	animation: pulse 2s infinite;
}

.channels-live-float image {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.channels-live-float text {
	font-size: 24rpx;
	color: #ff4d4f;
	font-weight: bold;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

.gshop {
	display: flex;
	height: 350rpx;
	margin-top: -150rpx;
	.box {
		padding: 30rpx 23rpx;
		background-color: #fff;
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-right: 20rpx;
		border-radius: 20rpx;
		.title {
			font-size: 33rpx;
			font-weight: 550;
		}
		.til {
			padding: 10rpx 0;
			font-size: 25rpx;
			color: #65ba6c;
		}
		.contents {
			flex: 1;
			display: flex;
			position: relative;
			.xy {
				color: #fff;
				background-color: #3bae43;
				height: 22px;
				width: 22px;
				border-radius: 50%;
				line-height: 10;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			image {
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
			}
		}
	}
	.box:nth-child(1) {
		background-image: url(/static/images/bj3.png);
	}
	.box:nth-child(2) {
		background-image: url(/static/images/bj3.png);
		margin-right: 0;
	}
}

// 一键开团
/* 一键开团样式 */
.group-buy-banner {
  position: relative;
  width: 100%;
  height: 200rpx;
	background-color: #fff;
	background-image: linear-gradient(135deg, #edfeee, #acddac);
  
  .banner-content {
    position: relative;
    z-index: 2;
    padding: 40rpx;
    .banner-title {
      font-size: 33rpx;
      font-weight: bold;
      margin-bottom: 15rpx;
      display: block;
    }
    .banner-subtitle {
      font-size: 25rpx;
      margin-bottom: 30rpx;
			color: #65ba6c;
      display: block;
    }
		.xy {
			position: absolute;
			right: 30rpx;
			bottom: 16rpx;
			background-color: #3bae43;
			height: 80rpx;
			width: 80rpx;
			border-radius: 25rpx;

			display: flex;
			justify-content: center;
			align-items: center;
		}
  }
}

/* 分类导航 */
.category {
  display: grid;
	grid-template-columns: repeat(4, 1fr);

  padding: 20rpx 0;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
	border-radius: 20rpx;
	box-shadow: 4rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);

  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
		margin-bottom: 10px;

    image {
			border-radius: 50%;
      width: 80rpx;
      height: 80rpx;
			padding: 5rpx;
      margin-bottom: 10rpx;
    }

    text {
      font-size: 24rpx;
      color: #333;
    }
  }
}

/* 限时抢购 */
.seckill {
  padding: 20rpx;
  // background-image: linear-gradient(to bottom, #fbf4f5, #f9cecf);
	background-image: linear-gradient(180deg, #fff, #f78e1e);
  margin-top: 20rpx;
  border-radius: 10rpx;
	overflow: hidden;
	position: relative; // 添加相对定位，作为伪元素的定位基准

	box-shadow: 4rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);

	// 左下角三角形
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 500rpx;
    height: 110rpx;
    // background-image: linear-gradient(to bottom, #fcfcfc, #ffd6e0);
		background-image: linear-gradient(180deg, #fff, #f78e1e);
    z-index: 1;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
  }

  // 右下角三角形
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 500rpx;
    height: 110rpx;
    // background-image: linear-gradient(to bottom, #fcfcfc, #ffd6e0);
		background-image: linear-gradient(180deg, #fff, #f78e1e);
    z-index: 1;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }

  .seckill-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title-text {
			.left {
				font-size: 32rpx;
				font-weight: bold;
				color: #515050;
			}
			.right {
				font-size: 24rpx;
				color: #eb6259;
			}
    }

    .more {
      font-size: 24rpx;
      color: #6b6767;
    }
  }

  .seckill-list {
    display: flex;

    .seckill-item {
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			padding-bottom: 35rpx;

      image {
        width: 80%;
        height: 180rpx;
        border-radius: 10rpx;
      }

      .price {
        font-size: 26rpx;
				line-height: 1;
        color: #f92f01;
        font-weight: bold;
        margin-top: 10rpx;
        display: block;
      }

      .name {
        font-size: 20rpx;
        color: #b4b2b2;
        margin-top: 5rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }

	.tg-btn {
		margin-top: -30rpx;
		position: relative;
		z-index: 2;

		box-sizing: border-box;
		text-align: center;
		display: flex;
		justify-content: center;
		.btn {
			width: 35%;
			padding: 18rpx 70rpx;
			background-image: linear-gradient(to right, #fb8c11, #f72925);
			border: 3px #fed38a solid;
			border-radius: 50rpx;
			color: #fff;
			font-weight: 550;
			text {
				padding: 0 8rpx;
			}
		}
	}
}

.margin-bottom-right {
	margin: 0 20rpx 20rpx 0;
}

.margin-bottom {
	margin: 0 0 20rpx 0;
}

/* 卡片 */
.goods-list-card {
  padding: 20rpx 0 0 0;
  background-image: url(/static/images/bj5.jpg);
	// background-size: cover;
  // background-position: center;
  // background-repeat: no-repeat;
  border-radius: 10rpx;
	display: flex;
	flex-direction: column;

  .section-title {
		padding-left: 20rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }

  .goods-grid {
		flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
		padding-bottom: 14px;
		position: relative;

    .goods-item-left {
			padding-left: 20rpx;
			font-size: 23rpx;
			height: 63px;

			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				padding-bottom: 15px;
				width: 85px;
			}

			.btn {
				width: 36px;
				font-size: 26rpx;
				color: #fff;
				padding: 4px 3px 5px;
				text-align: center;
				line-height: 1;
				border-radius: 20rpx;
				background-image: linear-gradient(135deg, #3bae43, #3bae43);
			}
		}
    .goods-item-right {
			position: absolute;
			bottom: -4px;
			right: -2px;
			image {
				width: 80px;
				height: 80px;
			}
		}
		.goods-item-right0 {
			position: absolute;
			bottom: 2px;
			right: 3px;
			image {
				width: 60px;
				height: 60px; 
			}
		}
		.goods-item-right1 {
			position: absolute;
			bottom: -7px;
			right: 0px;
			image {
				width: 90px;
				height: 80px; 
			}
		}
		.goods-item-right2 {
			position: absolute;
			bottom: 5px;
			right: 4px;
			image {
				width: 60px;
				height: 60px;
			}
		}
  }
}

/* 积分换购 */
.seckill-jf {
  padding: 20rpx;
  background-image: linear-gradient(180deg, #edfeee, #9fd2a0);
  margin-top: 20rpx;
  border-radius: 10rpx;
	overflow: hidden;
	position: relative; // 添加相对定位，作为伪元素的定位基准

	box-shadow: 4rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);

  .seckill-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title-text {
			.left {
				font-size: 32rpx;
				font-weight: bold;
				color: #515050;
			}
			.right {
				font-size: 24rpx;
				color: #3c9041;
			}
    }

    .more {
      font-size: 24rpx;
      color: #999;
    }
  }

  .seckill-list {
    display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20rpx;

    .seckill-item {
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			padding-bottom: 30rpx;

      image {
        width: 80%;
        height: 180rpx;
        border-radius: 10rpx;
				background-color: #f8f8f8;
      }

			.title {
				font-size: 27rpx;
				line-height: 1;
        color: #0b0b0b;
        margin-top: 10rpx;
        display: block;
			}

      .price {
				box-sizing: border-box;
        font-size: 20rpx;
				line-height: 1;
        color: #f92f01;
        font-weight: bold;
        margin-top: 10rpx;
        display: block;
				width: 80%;
				padding: 7.5rpx 10rpx;
      }

			.instant-num {
				background-image: linear-gradient(135deg, #ff0000, #ff6100);
				color: #fefefe;
			}

			.instant-num {
				position: relative;
				overflow: hidden;
				display: inline-block;
				&::after {
					content: '';
					position: absolute;
					top: -50%;
					left: -50%;
					width: 200%;
					height: 20rpx;
					background: linear-gradient(45deg, transparent, rgba(255,255,255,0.8), transparent);
					transform: rotate(-45deg);
					animation: shine 1.5s infinite;
				}
			}
			
			@keyframes shine {
				0% {
					transform: translateX(-100%) rotate(-45deg);
				}
				100% {
					transform: translateX(100%) rotate(-45deg);
				}
			}

      .name {
        font-size: 23rpx;
        color: #b4b2b2;
        margin-top: 5rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}

// 爆款推荐
.hotShop {
	.title {
		border-radius: 20rpx;
		background-color: #fff;
		text-align: center;
		box-shadow: 4rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);
		padding: 20rpx;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		color: #333;
		.font{
			font-weight: 550;
			font-size: 31rpx;
		}
		.fh {
			font-weight: 700;
		}
	}
	.list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;
		.item {
			background-color: #fff;
			box-shadow: 4rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 300rpx;
			}
			.content {
				background-color: #fff;
				padding: 20rpx 10rpx 35rpx;
				.title-2 {
					display: flex;
					.member-price-tag {
						transform: scale(0.88);
						margin-left: 5px;
						display: inline-flex;
						align-items: center;
						background: linear-gradient(90deg, #3caf44, #2ddab8); /* 绿色渐变背景 */
						border-radius: 14rpx; /* 圆角 */
						overflow: hidden;
						.member-text {
							color: white;
							font-size: 18rpx;
							padding: 0 5rpx;
							font-weight: bold;
						}
						.price2 {
							color: #1c8b22;
							font-size: 20rpx;
							background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
							padding: 5rpx;
							border-top-right-radius: 20rpx;
							border-bottom-right-radius: 20rpx;
						}
					}

					.price {
						color: #fd371d;
						font-weight: 600;
						.fh {
							font-size: 23rpx;
						}
					}
				}
				.name {
					margin-top: 7rpx;
					font-size: 26rpx;
				}
			}
		}
	}
  .loading, .no-more {
    text-align: center;
    padding: 20rpx 0;
    color: #999;
    font-size: 28rpx;
  }
}

/* 扫码按钮 */
@keyframes float {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.float-scan {
  .nb {
    background-color: #f92f01;
    border-radius: 50%;
  }
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 40rpx);
  padding: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ec927e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  .text {
    font-size: 9px;
    color: #fff;
    transform: translateY(-3px);
  }
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.1);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

/* 登录弹框 */
.login-form {
  position: relative;
  padding: 40rpx 30rpx 140rpx;
  background-color: #fefefe;
  border-radius: 40rpx 40rpx 0 0;

  .login-title {
    image {
      display: block;
      margin: 30rpx auto 30rpx;
      width: 130rpx;
      height: 130rpx;
      border-radius: 50%;
      vertical-align: middle;
    }

    .welcome {
      text-align: center;
      font-size: 40rpx;
      color: #000;
    }

    .tipsS {
      font-size: 25rpx;
      padding-top: 20rpx;
      text-align: center;
      color: rgba(107, 114, 128, 1);
    }
  }

  .login-button {
    .login {
      margin: 0rpx auto 50rpx;
      height: 48px;
      opacity: 1;
      border-radius: 6px;
      background: #32af5a;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 12px 18.13px 12px 17.88px;
      width: 400rpx;
      color: #fefefe;
    }
  }
}
.safe-area {
  height: calc(env(safe-area-inset-bottom) + 50rpx);
  background: #f6f6f9;
}
</style>
